<template>
  <a-spin :spinning="confirmLoading">
    <a-form :form="form" class="getScoreForm">

      <a-form-item
        label="gatewayCode"
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
        has-feedback=""
      >
        <a-input
          placeholder="请输入网关编号（gatewayCode）"
          v-decorator="['gatewayCode', {rules: [{required: true, message: '请输入网关编号（gatewayCode）！'}]}]"/>
      </a-form-item>

      <a-form-item
        label="micRouter"
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
        has-feedback=""
      >
        <a-input
          placeholder="请输入通道号（micRouter）"
          v-decorator="['micRouter', {rules: [{required: true, message: '请输入通道号（micRouter）！'}]}]"/>
      </a-form-item>

      <a-form-item
        label="faultText"
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
        has-feedback=""
      >
        <a-input
          placeholder="请输入故障名称（faultText）"
          v-decorator="['faultText', {rules: [{required: true, message: '请输入故障名称（faultText）！'}]}]"/>
      </a-form-item>

      <a-form-item
        label="accessToken（数字）"
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
        has-feedback=""
      >
        <a-input
          placeholder="请输入accessToken（数字）"
          v-decorator="['accessToken', {rules: [{required: true, message: '请输入accessToken（数字）！'}]}]"/>
      </a-form-item>

      <a-form-item
        label="score"
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
        has-feedback=""
      >
        <a-input placeholder="请输入分数（score）" v-decorator="['score', {rules: [{required: true, message: '请输入分数（score）！'}]}]"/>
      </a-form-item>

      <a-form-item
        label="verfyTime"
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
      >
        <!--        <a-input placeholder="请输入1:1时间（verfyTime）" v-decorator="['verfyTime', {rules: [{required: true, message: '请输入1:1时间（verfyTime）！'}]}]"/>-->
        <a-date-picker show-time placeholder="请选择1:1时间（verfyTime）" @change="onChange" style="width: 100%" v-decorator="['verfyTime', {rules: [{required: true, message: '请输入1:1时间（verfyTime）！'}]}]"></a-date-picker>
      </a-form-item>

      <a-form-item
        label="文件"
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
        has-feedback=""
        style="text-align: left"
      >
        <a-upload
          name="file"
          :customRequest="customRequest"
          list-type="picture-card"
          :show-upload-list="true"
          :file-list="fileList"
          @max-count="1"
          @change="change"
        >
          <div>
            <a-icon :type="loading ? 'loading' : 'plus'"/>
            <div class="ant-upload-text">
              上传
            </div>
          </div>
        </a-upload>

      </a-form-item>

      <a-form-item
        style="text-align: center"
        :labelCol="labelCol"
        :wrapperCol="wrapperCol"
        has-feedback="">
        <a-button class="btn_add" @click="handleSubmit">提交</a-button>
      </a-form-item>

    </a-form>
  </a-spin>
</template>

<script>
  import { getScore } from '@/api/modular/test/testManage'
  import AFormItem from 'ant-design-vue/es/form/FormItem'

  export default {
    components: { AFormItem },
    data () {
      return {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 15 }
        },
        visible: false,
        confirmLoading: false,
        groupCodeList: {},
        form: this.$form.createForm(this),
        stationTree: [],
        treeLoading: true,
        verfyTimeString: [],
        industryTypeList: [],
        fileName: '',
        deviceList: [],
        previewVisible: false,
        previewImage: '',
        fileList: [],
        loading: false
      }
    },
    methods: {
      /**
       * 上传文件
       */
      customRequest (data) {
        this.fileName = data.file
      },
      handleSubmit () {
        const { form: { validateFields } } = this
        this.confirmLoading = true
        validateFields((errors, values) => {
          if (!errors) {
            const formData = new FormData()
            formData.append('file', this.fileName)
            formData.append('accessToken', values.accessToken)
            formData.append('faultText', values.faultText)
            formData.append('gatewayCode', values.gatewayCode)
            formData.append('micRouter', values.micRouter)
            formData.append('score', values.score)
            formData.append('verfyTime', this.verfyTimeString)
            getScore(formData).then((res) => {
              this.confirmLoading = false
              if (res.success) {
                this.$message.success('新增成功')
              } else {
                this.$message.info('新增失败：' + res.message)
              }
            }).finally((res) => {
              this.confirmLoading = false
            })
          } else {
            this.confirmLoading = false
          }
        })
      },
      onChange (date, dateString) {
        if (date == null) {
          this.verfyTimeString = []
        } else {
          this.verfyTimeString = dateString
        }
      },
      handleCancel () {
        this.form.resetFields()
        this.visible = false
        this.fileName = ''
        this.fileList = []
      },
      change ({ fileList }) {
        this.fileList = fileList
      }
    }
  }
</script>

<style lang="less" scoped>
.getScoreForm{
  margin-top: 30px;
  background-image: url(~@/assets/img/table_border.png);
  background-size: 100% 100%;
  padding: 20px;
  padding-top: 60px;
}

.ant-btn{
  width: 160px;
  height: 40px;
  transform: translateX(280px);
}
</style>
